<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { showLoading, hideLoading } from '@tarojs/taro';

interface Props {
  id: string | number;
  src: string;
  width: string;
  height: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: '',
  src: '',
  width: '100%',
  height: '300px',
});
const aliplayer = ref();

onMounted(() => {
  showLoading();

  setTimeout(() => {
    nextTick(() => {
      aliplayer.value = new Aliplayer(
        {
          id: `ali-player-${props.id}`,
          source: props.src,
          width: props.width,
          height: props.height,
          autoplay: true,
          isLive: true,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: 'hover',
          useH5Prism: true,
          skinLayout: [
            {
              name: 'bigPlayButton',
              align: 'blabs',
              x: 30,
              y: 80,
            },
            {
              name: 'errorDisplay',
              align: 'tlabs',
              x: 0,
              y: 0,
            },
            {
              name: 'infoDisplay',
            },
            {
              name: 'controlBar',
              align: 'blabs',
              x: 0,
              y: 0,
              children: [
                {
                  name: 'liveDisplay',
                  align: 'tlabs',
                  x: 15,
                  y: 6,
                },
                {
                  name: 'fullScreenButton',
                  align: 'tr',
                  x: 10,
                  y: 10,
                },
              ],
            },
          ],
        },
        () => {
          aliplayer.value.mute();
          aliplayer.value.play();
        },
      );
    });

    hideLoading();
  }, 5000);
});

onBeforeUnmount(() => {
  if (aliplayer.value && aliplayer.value.dispose) aliplayer.value.dispose();
});
</script>

<template>
  <view
    class="app-ali-player"
    :id="`ali-player-${props.id}`"
    :style="{ width: props.width, height: props.height }"
  ></view>
</template>

<style lang="scss">
.app-ali-player {
  background-color: #333;
}
</style>
